<template >
    <!-- 用户管理 -->
    <div class="top">
        <div style="display: flex; height: 100%">
            <div
                class="block"
                style="
                    width: 20%;
                    height: 97.5%;
                    float: left;
                    background-color: white;
                    border-radius: 10px;
                    box-shadow: 2px 2px 5px gray;
                    overflow: auto;
                "
            >
                <el-input placeholder="输入关键字进行过滤" v-model="filterText"> </el-input>
                <el-tree
                    class="filter-tree"
                    :data="treeData"
                    :props="defaultProps"
                    :filter-node-method="filterNode"
                    ref="tree"
                    @node-click="treenodeClick"
                    
                >
                    <!-- default-expand-all 默认展开-->
                </el-tree>
            </div>
            <div style="width: 80%; height: 100%; float: right; margin-right: 10px">
                <div class="block">
                    <el-image :src="src1" style="height:70px;width:110px" @click="refresh()"></el-image>
                    <el-image :src="audit" style="height:70px;width:110px" @click="newUser('新用户注册', pid)"></el-image>
                    <el-image :src="src2" style="height:70px;width:110px" @click="delete_button()"></el-image>
                    <div class="block2">
                        <div class="src4">
                            <el-input
                                v-model="query_conditions"
                                prefix-icon="el-icon-search"
                                style="width: 360px; border-radius: 4px; border: 1px solid gray"
                                placeholder="请输入内容"
                            ></el-input>
                        </div>
                        <div class="src3">
                            <el-image :src="src3" style="height:70px;width:110px" @click="top_query()"></el-image>
                        </div>
                    </div>
                </div>

                <div class="tabbox">
                    <el-table
                        ref="multipleTable"
                        :data="tableData"
                        border
                        :header-row-style="{ background: '#005ab5', color: '#ffffff' }"
                        tooltip-effect="dark"
                        style="width: 100%; height: 100%; margin: 0 auto"
                        @selection-change="handleSelectionChange"
                    >
                        <el-table-column type="selection" width="70px" align="center"> </el-table-column>
                        <el-table-column prop="userName" align="center" label="用户名" min-width="21%"> </el-table-column>
                        <el-table-column prop="name" label="姓名" min-width="8%" align="center"> </el-table-column>
                        <el-table-column prop="jobTitle" label="职务" min-width="12%" align="center"> </el-table-column>
                        <el-table-column prop="number" label="登录次数" min-width="10%" align="center"> </el-table-column>
                        <el-table-column prop="time" label="最后登录时间" min-width="12%" align="center"> </el-table-column>
                        <el-table-column  label="操作" min-width="14%" align="center">
                            <template slot-scope="scope">
                                <div class="src6">
                                    <el-image :src="src6" style="height:40px;width:70px;" @click="newUsers('用户修改', scope.row)"></el-image>
                                </div>
                            </template>
                        </el-table-column>
                    </el-table>
                    <div class="pagenum_sys">
                        <p>第{{ this.pageCur }}页&nbsp;&nbsp;每页{{ this.pageSize }}条&nbsp;&nbsp;共{{ this.pageEntryTotal }}条</p>
                    </div>

                    <div class="page_syss">
                        <el-button type="text" @click="pageturn('first')" v-if="this.pageCur != 1">首页</el-button>
                        <el-button type="text" @click="pageturn('previous')" v-if="this.pageCur != 1">上一页</el-button>
                        <el-button type="text" @click="pageturn('next')" v-if="this.pageCur != this.pageTotal">下一页</el-button>
                        <el-button type="text" @click="pageturn('end')" v-if="this.pageCur != this.pageTotal">末页</el-button>
                        <el-button type="text" style="color: #333">第</el-button>&nbsp;
                        <el-input style="width: 76px" v-model="pageNum" clearable @change="checkJumpNum()"></el-input>&nbsp;
                        <el-button type="text" style="color: #333">页</el-button>
                        <el-button type="text" @click="pageturn('goto')">转到</el-button>
                    </div>
                </div>
            </div>
        </div>
        <user-input :formVisible="formVisible" :formData="formData" @closeDialog="closeDialog()"></user-input>
        <!-- <el-dialog id="id_eldiaglog" :title="eldiaglog_title" :visible.sync="dialogVisible" width="80%" height="100%">
            <div id="iddivframe">
                <iframe id="idframe" src="" frameborder="0" width="100%" height="600px"></iframe>
            </div>
        </el-dialog> -->
    </div>
</template>

<script>
import '../../assets/css/jdCommon.css';
import UserInput from './user_input';
export default {
  components: { UserInput },
    name: 'user_manager',
    data() {
        return {
            formVisible:false,
            formData:null,
            curDeptId: '', //当前选中的部门ID
            editFlg: false,
            dialogVisible: false, //弹出框
            query_conditions: '', //查询框内容
            src1: require('../../assets/imgs/刷新按钮.png'),
            src2: require('../../assets/imgs/删除按钮.png'),
            src3: require('../../assets/imgs/查询按钮.png'),
            src4: require('../../assets/imgs/查询框.png'),
            src5: require('../../assets/imgs/查看按钮.png'),
            src6: require('../../assets/imgs/修改按钮.png'),
            audit: require('../../assets/imgs/组 557.png'),
            add_img: require('../../assets/imgs/添加按钮.png'),
            input: '',
            input2: '',
            tableData: [],
            //目录树开始
            filterText: '',
            treeData: [],
            defaultProps: {
                children: 'dtos',
                label: 'proName'
            },
            showTree: true,
            //目录树结束
            //分页信息开始
            pageSize: 10, //第页几条信息
            pageCur: 1, //当前页
            pageNum: null, //翻页的数字
            pageTotal: null, //总页数
            pageEntryTotal: null, //总条数
            //分页信息结束
            eldiaglog_title: '',
            pid:''
        };
    },
    watch: {
        filterText(val) {
            this.$refs.tree.filter(val);
        }
    },
    created() {
       this.getpagedata();
    },
    methods: {
        //关闭弹窗
        closeDialog(){
            this.formVisible=false;
            this.formData=null;
        },
        //分页查询
        getpagedata(){
            let param = {
            page: '1',
            pageSize: this.pageSize,
            word: this.query_conditions,
            pid:this.curDeptId
        };
        this.$post('sysManage/user/query', param).then((res) => {
            this.tableData = res.data.rows;
            this.pageEntryTotal = res.data.total;
        });
        this.getDeptTree();
        },
        newUser(stype, pid) {
            if (this.curDeptId == '') {
                this.$message.error('请先选择部门');
                return false;
            }else{
             this.formVisible=true;
             this.formData=pid
             }
            // this.dialogVisible = true;
            // if ($('#idframe').attr('src') == undefined) {
            //     setTimeout(function () {
            //         dialogFrameSrc(id);
            //     }, 500);
            // } else {
            //     dialogFrameSrc(id);
            // }
            // this.eldiaglog_title = stype;
        },
         newUsers(stype, row) {
            if (row.id == '' && this.curDeptId == '') {
                this.$message.error('请先选择部门');
                return false;
            }else{
             this.formVisible=true;
             this.formData=row
             }
        },
        handleSelectionChange(val) {
            this.multipleSelection = val;
        },
        cellStyle({ row, column, rowIndex, columnIndex }) {
            // 状态列字体颜色
            if (row.status === '待审核' && columnIndex === 7) {
                return 'color: red';
            } else if (row.status === '已通过' && columnIndex === 7) {
                return 'color: grey';
            }
        },
        filterNode(value, treeData) {
            if (!value) return true;
            return treeData.proName.indexOf(value) !== -1;
        },
        checkJumpNum() {
            if (isNaN(this.pageNum)) {
                this.$message.error('请输入数字');
                this.pageNum = '';
                return false;
            }
            if (this.pageNum > this.pageTotal) {
                this.$message.error('输入的页数不能大于总页数');
                this.pageNum = '';
            }
        },
        pageturn(type) {
            switch (type) {
                case 'first':
                    this.pageCur = 1;
                    this.getUserInfo('1', this.pageSize, '', '', '', '1', '');
                    break;
                case 'previous':
                    this.pageCur = this.pageCur - 1;
                    this.getUserInfo(this.pageCur, this.pageSize, '', '', '', '1', '');
                    break;
                case 'next':
                    this.pageCur = this.pageCur + 1;
                    this.getUserInfo(this.pageCur, this.pageSize, '', '', '', '1', '');
                    break;
                case 'end':
                    this.pageCur = this.pageTotal;
                    this.getUserInfo(this.pageCur, this.pageSize, '', '', '', '1', '');
                    break;
                case 'goto':
                    this.pageCur = this.pageNum;
                    this.getUserInfo(this.pageCur, this.pageSize, '', '', '', '1', '');
                    break;
            }
        },
        getDeptTree() {
            this.$post('/sysManage/branchManage/getTree').then((res) => {
                this.treeData = res.data;
            });
        },
        delete_button() {
            let currentSelect = this.$refs.multipleTable.selection;
            currentSelect.forEach((item, index) => {
                this.$post('/sysManage/user/delete/' + item.id).then((res) => {
                    this.$message.success('删除成功!');
                });
            });
            //this.serch();
            // this.$router.push('/user_manager');
        },
        treenodeClick(data, node, tnode) {
            this.curDeptId = data.id;
            this.pid = data.id;
            this.getpagedata();
        },
        //刷新
        refresh() {
            let param = {
                page: '1',
                pageSize: this.pageSize,
                word: ''
            };
            this.$post('sysManage/user/query', param).then((res) => {
                this.tableData = res.data.rows;
                this.pageEntryTotal = res.data.total;
                this.$message.success('刷新成功!');
            });
            this.getDeptTree();
        },
        //搜索框
        top_query() {
            let param = {
                page: '1',
                pageSize: this.pageSize,
                word: this.query_conditions
            };
            this.$post('sysManage/user/query', param).then((res) => {
                this.tableData = res.data.rows;
                this.pageEntryTotal = res.data.total;
            });
            this.getDeptTree();
        },
         changeLayout (type) {
            let $ = this.$
            if (type === 1) {
                $('.right_box').show()
                $('.left-2').css('cssText', 'position: relative;width: 100%;')
            } else if (type === 2) {
                $('.right_box').hide()
                $('.left-2').css('cssText', 'position: absolute;width: 98%;')
            }
        }
    },
     mounted(){
         this.changeLayout(2)
    },
     destroyed() {
        this.changeLayout(1)
    }

};
function dialogFrameSrc(id) {
    $('#iddivframe').html(
        '<iframe id="idframe"  frameborder="0" width="100%" height="600px" src="/?r=' +
            Math.random() +
            '/#/user_input" data-id="' +
            id +
            '" ></iframe>'
    );
}
</script>

<style scoped>
.src4 {
    margin-top: 3%;
    float: left;
}
.src3 {
    float: right;
}
.src5 {
    
}
#id_eldiaglog .el-dialog__body {
    padding: 0px 20px;
}
/* 修改目录树背景色 开始 */
.el-tree-node:focus > .el-tree-node__content {
    background-color: orange !important;
}
.el-tree-node__content:hover {
    background-color: #66b1ff87;
}
.el-tree--highlight-current .el-tree-node.is-current > .el-tree-node__content {
    background-color: orange;
}
/* 修改目录树背景色 结束 */
.page_syss {
    position: relative;
    float: right;
    right: 30px;
    bottom: 40px;
    font-family: '微软雅黑';
    color: #5ca9d3;
    font-size: 15px;
    width: 340px;
    margin-top: 20px;
    margin-bottom: -20px;
    margin-right: -30px;
}
/deep/.el-image__inner {
    vertical-align: top;
    margin-top: -6px !important;
}
</style>
